<template>
  <div class="header">
    <div class="logo">videoweb 后台管理</div>
    <div class="user">
      <img src="../assets/img/user.jpg">
      <el-dropdown trigger="click" style="cursor: pointer" @command="handleCommand">
        <span class="username">
          {{userName}}
          <i class="el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {mixin} from '../mixins/index'
export default {
  name:'the-header',
  mixins:[mixin],
  computed:{
    userName(){
      return localStorage.getItem('userName')
    }
  },
  methods:{
    handleCommand(command){
      if (command == 'logout') {
        localStorage.removeItem('userName')
        this.$router.push('/')
      }
    }
  }
}
</script>

<style scoped>
@import '../assets/css/theHeader.css';
</style>